<template>
    <Content title="使用物料">
        <view class="from-box" :style="{ 'padding-bottom': '160rpx' }">
            <view class="content content-bottom">
                <u-form labelPosition="left" :model="model" labelWidth="120" labelAlign="left" :rules="rules"
                    ref="uForm">
                    <u-form-item borderBottom label="品名" prop="materialName" required>
                        <uni-data-select v-model="model.materialName" :localdata="list" :showInput="!option.item"
                            @inputChange="getList" @change="change" placeholder="请选择"
                            :disabled="!!option.item"></uni-data-select>
                    </u-form-item>

                    <u-form-item borderBottom label="物料号" prop="materialCode" required>
                        <u-input label v-model="model.materialCode" placeholder="请填写物料号" disabled></u-input>
                    </u-form-item>

                    <u-form-item borderBottom label="规格" prop="specification">
                        <u-input label v-model="model.specification" placeholder="请填写规格" disabled></u-input>
                    </u-form-item>

                    <u-form-item borderBottom label="数量" prop="num" required>
                        <u-input label v-model.number="model.num" placeholder="请填写数量"></u-input>
                    </u-form-item>

                    <view class="btn-v">
                        <view class="but-box">
                            <u-button class="btn" text="取消" @click="back"></u-button>
                            <u-button :throttleTime="1000" class="btn" type="primary" @click="submit" text="确认"
                                :loading="loading"></u-button>
                        </view>
                    </view>
                </u-form>
            </view>
        </view>
    </Content>
</template>

<script>
    import Content from "@/components/content/index.vue";
    import {
        getPageData,
        getUserInfo
    } from "@/store/user";
    import fetch from "@/utils/fetch";

    export default {
        components: {
            Content,
        },
        data() {
            return {
                option: {},
                list: [],
                loading: false,
                model: {
                    taskId: '',
                    materialCode: "",
                    materialName: "",
                    specification: "",
                    num: "",
                },
                rules: {
                    materialCode: {
                        type: "string",
                        required: true,
                        message: "请填写",
                        trigger: ["change", "blur"],
                    },
                    materialName: {
                        type: "string",
                        required: true,
                        message: "请填写",
                        trigger: ["change", "blur"],
                    },
                    num: {
                        type: "number",
                        required: true,
                        message: "请填写",
                        trigger: ["change", "blur"],
                    },
                },
            };
        },
        watch: {
            loading(val) {
                if (val)
                    uni.showLoading({
                        mask: true
                    });
                uni.hideLoading();
            }
        },
        onLoad: function(option) {
            //option为object类型，会序列化上个页面传递的参数
            this.option = option;
            this.model.taskId = parseInt(option.taskId);
            this.model.itemId = parseInt(option.subTaskId);
            if (option.item) {
                const item = this.option.item = JSON.parse(option.item);
                this.model.id = item.id;
                this.model.useOutInfoId = item.useOutInfoId;
                this.model.materialCode = item.materialCode;
                this.model.materielNo = item.materielNo;
                this.model.materialName = item.materialName;
                this.model.specification = item.specification;
                this.model.num = parseInt(item.num);
                this.getList(this.model.materialCode);
            }
        },
        onReady: function() {
            if (this.$refs.uForm) this.$refs.uForm.setRules(this.rules);
        },
        methods: {
            back() {
                uni.navigateBack({
                    delta: 1,
                });
            },
            getList(query) {
                fetch("post", "/dms/material/page", {
                    pageSize: 100,
                    pageNum: 1,
                    materialName: query.split('-')[0],
                }).then((res) => {
                    this.list = (res.data.records || []).map(item => {
                        item.item = item;
                        item.text = item.materialCode + '-' + item.materialName;
                        item.value = item.materialName;
                        return item;
                    });
                });
            },
            change(value) {
                const obj = this.list.find(item => item.materialName === value);
                if (obj) {
                    this.model.useOutInfoId = obj.item.id;
                    this.model.materialCode = obj.item.materialCode;
                    this.model.materielNo = obj.item.materialCode;
                    this.model.materialName = obj.item.materialName;
                    this.model.specification = obj.item.materialModel;
                    this.model.num = 1;
                }
            },
            submit() {
                const that = this;
                that.$refs.uForm.validate().then((valid) => {
                    if (valid) {
                        that.loading = true;
                        let url = '/dms/dcmMaintainTask/addMaterial',
                            method = "post";
                        if (this.option.item) {
                            url = '/dms/dcmMaintainTask/updateMaterial', method = "put";
                        }
                        fetch(method, url, that.model).then((data) => {
                            that.loading = false;
                            uni.$emit("openToast", {
                                type: "success",
                                title: "操作成功",
                                complete() {
                                    setTimeout(() => {
                                        uni.navigateBack({
                                            delta: 1,
                                        });
                                    }, 1000);
                                },
                            });
                        }).catch(()=>{
                            that.loading = false;
                        });
                    }
                });
            },
        },
    };
</script>

<style scoped lang="scss">
    .from-box {
        padding: 20rpx;
        height: 100%;
        overflow: auto;
        display: flex;
        flex-direction: column;

        /deep/ .u-form-item__body__left__content__label {
            margin-left: 20rpx;
        }

        /deep/ .uni-select__input-placeholder {
            color: #cbc9cc !important;
            font-size: 15px !important;
        }
    }

    .content {
        padding: 20rpx 30rpx;
        background-color: #ffffff;
        border-radius: 5px;
        box-shadow: 0 12rpx 18rpx -6rpx rgba(0, 0, 0, 0.2);
    }

    .content-bottom {
        flex: 1;
    }
</style>